<template>
    <div class="mylist">
    <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
        <el-breadcrumb-item>用户列表</el-breadcrumb-item>    
    </el-breadcrumb>

    
    <el-card class="box-card">
      <el-row :gutter="10">
  <el-col :span="10"><div class="grid-content bg-purple">
    <el-input placeholder="请输入内容"  class="input-with-select">
    <el-button slot="append" icon="el-icon-search"></el-button>
  </el-input>
    </div></el-col>
  <el-col :span="1"><div class="grid-content bg-purple">
    <el-button type="primary" @click="dialogVisible = true">添加用户</el-button>
    </div></el-col>
</el-row>
          
  
   <div style="margin-top: 15px;">

  </div>

   <el-table
    :data="tableData"
    border
    style="width:100%">
    <el-table-column
      type="index"
      label="#"
      width="50">
    </el-table-column>
    <el-table-column
      prop="username"
      label="姓名"
      >
    </el-table-column>
    <el-table-column
      prop="email"
      label="邮箱">
    </el-table-column>
    <el-table-column
      prop="create_time"
      label="电话">
    </el-table-column>
    <el-table-column
      prop="role_name"
      label="角色">
    </el-table-column>
    <el-table-column
      prop="mg_state"
      label="状态">
      <el-switch
  >
</el-switch>
    </el-table-column>
    <el-table-column
       prop="id"
      label="操作">
       <el-button type="primary" size="mini" icon="el-icon-edit"></el-button>
       <el-button type="danger"  size="mini" icon="el-icon-delete"  @click="remove(scope.row)"></el-button>
       <el-button type="warning" size="mini" icon="el-icon-star-off"></el-button>
    </el-table-column>
  </el-table>
  <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
     :current-page="queryInof.pagenum"
      :page-sizes="[1,5,10]"
      :page-size="queryInof.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

     </el-card>
     <el-dialog
  title="添加用户"
  :visible.sync="dialogVisible"
  width="30%"
  >
  <span>
    <el-form :model="ruleForm"  :rules="rules" ref="ruleForm" label-width="70px"  >
  <el-form-item label="用户名" prop="username">
    <el-input v-model="ruleForm.username"></el-input>
  </el-form-item>
  <el-form-item label="密码" prop="password">
    <el-input v-model="ruleForm.password"></el-input>
  </el-form-item>
  <el-form-item label="邮箱" prop="email">
    <el-input v-model="ruleForm.email"></el-input>
  </el-form-item>
  <el-form-item label="手机号" prop="mobile">
    <el-input v-model="ruleForm.mobile"></el-input>  
  </el-form-item>
  
</el-form>
    
  </span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="mydata()">确 定</el-button>
  </span>
</el-dialog>

    
 
    </div>
</template>

<script>
export default {
  data() {
    return {
      queryInof: {
        query: "",
        pagenum: 1,
        pagesize:5
      },
      total: 0,
      tableData: [],
      dialogVisible: false,
      ruleForm:{
      username:'',
      password:'',
      email:'',
      mobile:'',
      },
      
       rules: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min:1, max: 5, message: '长度在 1到 5 个字符', trigger: 'blur' }
          ],
          email: [
             { required: true, message: '请输入邮箱地址', trigger: 'blur' },
             { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
          ],
          mobile: [
            { required: true, message: '请输入正确的手机号码', trigger: 'blur' },
            { min:11, max:11, message: '长度在 11个字符', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min:1, max: 6, message: '长度在 1到 6个字符', trigger: 'blur' }
          ],
          },
         
    };
  },

  created() {
    this.mylist();
    
  },

  methods: {
    mylist() {
      this.$axios
        .get("users", {
          params: this.queryInof
        })
        .then(res => {
          // console.log(res);
          this.tableData = res.data.data.users;
          this.total = res.data.data.total;
        });
    },

    handleSizeChange(newSize) {
      this.queryInof.pagesize = newSize;
      this.mylist();
    },
    handleCurrentChange(current) {
      this.queryInof.pagenum = current;
      this.mylist();
    },
    
    mydata(){
      this.$axios.post('users',
       this.ruleForm,
      ).then(res=>{
        console.log(res);
        console.log(res.data.meta.status);
        if(res.data.meta.status == 201){
              this.dialogVisible=false
              this.$message.success(res.data.meta.msg)
        }else if(res.data.meta.status==400){
          this.$message.error(res.data.meta.msg)

        }
      })
      
    },

    async remove(row) {
      console.log(row);
      const ids = await this.axios.delete(`users/${row.id}`);
      console.log(ids);
      // meta: msg: "删除成功";status: 200;
      if (ids.data.meta.status == 200) {
        this.$message.success("删除成功");
        this.getusers_list();
      } else {
        this.$message.error("失败");
      }
    },

    
  }
};
</script>

<style  scoped>
.input-with-select {
  width: 500px;
}
</style>